<script>

import TagEdit from '@/views/admin/tag/TagEdit.vue'

export default {
  name: 'TagList',
  components: { TagEdit },
  data () {
    return {
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      searchInfo: {
        name: '',
        createUser: '',
        status: ''
      },
      tableList: [],
      delIds: [],
      userinfoList: [],
      type: ''
    }
  },
  methods: {
    getTableList () {
      this.$axios.get('tag/page', {
        params: {
          ...this.pageInfo,
          ...this.searchInfo,
          type: this.type
        }
      }).then(data => {
        this.tableList = [...data.list]
        this.pageInfo.total = data.total
      }).catch(e => e)
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getTableList()
    },
    sizeChange (val) {
      this.pageInfo.page = 1
      this.pageInfo.limit = val
      this.getTableList()
    },
    search () {
      this.pageInfo.page = 1
      this.getTableList()
    },
    clear () {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.getTableList()
    },
    selectionChange (selection) {
      this.delIds = selection.map(item => item.tagId)
    },
    del (id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        if (this.delIds.length === 0) {
          this.$message.error('请至少选中一条数据进行删除！')
          return false
        } else {
          ids = [...this.delIds]
        }
      }
      this.$confirm(`确定删除数据[${ids}]的数据吗?`, '询问').then(() => {
        this.$axios.delete('tag/delete', {
          params: { ids: ids.toString() }
        }).then(data => {
          if (data) {
            this.$message.warning(data)
          } else {
            this.$message.success('删除成功')
          }
          this.getTableList()
        }).catch(e => e)
      }).catch(() => {})
    },
    edit (id) {
      this.$refs.tagEdit.init(id)
    },
    getUserinfoList () {
      if (this.type === 1) {
        this.$axios.get('userinfo/select').then(data => {
          this.userinfoList = [...data]
        }).catch(e => e)
      } else {
        this.userinfoList = []
      }
    },
    init () {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.type = this.$route.meta.type
      this.getTableList()
      this.getUserinfoList()
    }
  },
  watch: {
    $route () {
      this.init()
    }
  },
  created () {
    this.init()
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-form :model="searchInfo" label-width="80px" inline>
        <el-form-item label="标签名">
          <el-input v-model="searchInfo.name" clearable placeholder="标签名"/>
        </el-form-item>
        <el-form-item v-if="type === 1" label="创建人">
          <el-select v-model="searchInfo.createUser" clearable placeholder="创建人">
            <el-option v-for="item in userinfoList" :key="item.userinfoId" :value="item.userinfoId" :label="item.username"/>
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select v-model="searchInfo.status" clearable placeholder="账号状态">
            <el-option :value="1" label="可用"/>
            <el-option :value="2" label="禁用"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button v-if="type === 2" @click="edit()">添加</el-button>
      <el-button @click="del()">删除</el-button>
      <el-table :data="tableList" border @selection-change="selectionChange">
        <el-table-column type="selection" fixed="left"/>
        <el-table-column prop="tagId" label="编号"/>
        <el-table-column prop="name" label="标签名称"/>
        <el-table-column v-if="type === 1" prop="createUserinfo.username" label="创建人"/>
        <el-table-column prop="status" label="账号状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.status === 1" type="success">可用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button v-if="type === 2" @click="edit(row.tagId)">修改</el-button>
            <el-button @click="del(row.tagId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" :total="pageInfo.total" layout="total,prev,pager,next,jumper,sizes" @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
    <tag-edit ref="tagEdit" @close="getTableList"/>
  </div>
</template>

<style scoped lang="scss">

</style>
